YoungGyu Blog

[기초부터 완성까지 프론트엔드 1장 2장]

February 06, 2022

1장

프런트엔드의 궁극적인 목표는 서비스를 이용하는 사용자의 접근성과 편의성 증진입니다. 프런트엔드 개발자라면 어떻게 하면 사용자에게 더 편리하고 빠른 환경을 제공할지 항상 고민해야 합니다.


프론트 엔드 개발자의 역할 - 요구 사항 분석 : 개발 항목을 구체화하고 기술적 방향성을 정해야 합니다. - 설계 : 기능, 모듈 크게는 서비스 전반에 사용될 세부 기술들을 검토하고 적용해 구조를 설계합니다. - 개발: 디자인, 기획서를 바탕으로 모듈을 개발하며, 백엔드와 독립적으로 개발하도록 환경을 만들어 개발합니다. - 배포: 실 서비스 배포 전에 테스트 환경을 구성해 QA 과정을 반복하고, 자동화된 배포 전략을 도입해 애플리케이션을 배포합니다.

2장

프런트엔드 개발을 집 짓는 것에 비유한다면 HTML은 기둥을 만들고, CSS는 꾸미는 역할을 하며, 자바스크립트는 여러 시설을 동작하게 한다고할수 있습니다.

HTML

<h1>Hello world</h1>

HTML요소는 3가지 Content(내용), Start Tag(시작 태그), End Tag(종료 태그)로 나뉘며 이 3가지 구조를 합쳐 Element(요소)라고 부릅니다.

인라인 요소 : 태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지합니다. 높이나 너비를 지정 할 수 없으며,줄 내부 어디서든 시작합니다. span, button, img등 대표적인 인라인 요소입니다.

블록 요소 : 태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작합니다. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오른쪽으로 확장됩니다. div, article, form과 같은 요소들이 대표적인 블록 요소입니다.

  • DOCTYPE : DOCTYPE를 html로 지정하면 HTML5로 작성된 문서임을 나타냅니다. 하지만 브라우저에서는 DOCTYPE을 명시하지 않아도 HTML5로 작성된 문서로 인식하지만 IE9 이전 버전의 브라우저는 다른 형태의 문서로 인식합니다. 그래서 꼭 명시하는 것이 중요하다.
  • html : 문서의 루트 지점을 명시하는 태그입니다. 이 태그를 작성할 때는 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요합니다. 다국어를 지원하는 서비스라면 언어가 변경될때마다 lang 속성 또한 함께 변경되어야 합니다.
  • head - title : 문서의 이름을 나타냅니다. 문서당 한개의 제목 요소가 있어야 하며, 사용자 북마크나 검색 엔진에서 식별하는 기준으로 사용됩니다. - meta : 메타 데이터를 다룹니다. meta 태그를 통해 인코딩 방식, 뷰포트를 지정뿐만 아니라 더 많은 작업을 수행할 수 있습니다. charset=“UTP-8”은 문서의 인코딩 방식을 지정합니다. 지정하지 않으면 문자 깨짐 현상이 발생할 수 있습니다.

시맨틱

HTML을 시맨틱하게 작성한다는 것 의미없는 div 태그를 대신해 section, article, footer, nav, aside처럼 의미 있는 태그를 상황에 따라 사용하는 것입니다.

우리의 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색 엔진 최적화라고 부릅니다. 개발자의 몇 가지 노력으로 서비스가 적절한 키워드에 더 많이 노출되도록 할 수 있습니다.

  1. 시맨틱하게 HTML을 작성하자.

    • 시맨틱하게 코드를 작성함으로써 검색 엔진과 크롤러는 각 영역이 어떤 의미의 정보를 담는지 기계적으로 읽을 수 있습니다.

  2. title을 놓치지 말고 적절하게 작성하자.

    • title에 작성된 제목은 검색될 때 그 사이트의 이름입니다. 따라서 사이트를 가장 잘 나타내는 브랜드명, 키워드를 작성하는 것이 좋습니다. title을 자주 바꾸거나 길이가 너무 길면 검색엔진에서 불이익을 받습니다.

  3. <mata name=“description”을 이용해 페이지 설명을 남기자

    • mata name=“description” content=“이 페이지에 대한 두세 문장 정도의 간단한 설명”의 형태로 작성할 수 있습니다. 검색이 되었을 때 완전히 노출되도록 적는 것이 좋습니다.
  4. meta charset=“UTF-8를 사용해 인코딩 방식을 지정하자.
  5. open graph, twitter 태그를 사용해 외부 사용자를 유인하자
<meta property = "og:title" content="페이지 이름"/>
<meta property = "og:description" content="페이지에 대한 간략한 한두 줄 설명"/>

박스모델

브라우저의 렌더링 엔진은 각 요소를 나타낼 때 CSS 박스 모델에 맞춰 그립니다. 박스 모델은 4가지 영역으로 이뤄지는데 content영역, padding영역, border영역, margin영역으로 구분됩니다. content영역은 텍스트나 하위 박스 모델 등을 나타내며 padding,border,margin은 순서대로 content 영역을 둘러싸는 영역입니다. 둘러싼 영역들은 margin,padding,border CSS 프로퍼티로 너비를 지정합니다.

박스 모델을 이해하기 위해 반드시 알아야 하는 CSS 프로퍼티가 존재합니다. 바로 box-sizing입니다. box-sizing 프로퍼티는 요소의 너비와 높이는 계산하는 방식을 지정합니다. content-box, border-box 두 가지 값이 가능하며, 브라우저 디폴트값은 content-box입니다.

  • content-box: content 영역만을 기준으로 계산됩니다. 만약 해당 요소에 width를 100px 값을 준다면 content영역의 너비만 100px가 되며 padding, border는 별개로 계산됩니다. -border-box: padding, border, content 영역을 합한 영역을 기준으로 계산됩니다. 만약 해당 요소에 width를 100px의 값을 준다면 padding, border, content 영역의 너비를 모두 합한 값이 100px입니다.

flex

flex는 디바이스나 디스플레이의 크기에 따라 컨테이너에 들어 있는 콘텐츠의 너비, 높이, 순서를 변경해 컨테이너의 공간을 효율적으로 채우는 방법을 추구합니다. 따라서 여유 공간을 채우도록 너비나 높이를 늘이거나 줄입니다.

  • flex-direction : 이값에 따라 item이 쌓이는 방향이 정해진다
  • flex-wrap : 원래의 flex는 한줄이지만 wrap을 사용하면 여러행으로 표현 할 수 있다.
  • justify-content : 주 축의 아이템을 어떻게 배치할것인지 결정 할 수있다
  • align-items : 교차축에 대한 justify-content다.
  • align-content : 교차 축과 아이템 간 공간이 있으면 공간을 어떻게 분배할지 정합니다.
  • order : flex items의 순서를 지정합니다. 기본값은 0이며, 음수 양수 모두 가능합니다.
  • flex-grow : item의 비율을 설정합니다. 양수만 가능하며 균등분배합니다.

미디어 쿼리

콘텐츠 자체를 변경하지 않고 장치의 해상도, 뷰포트의 너비, 미디어의 유형 같은 조건에 따라 스타일을 지정할 수 있습니다. 데스크톱과 모바일, 태블릿 등 화면의 크기에 따라 다른 스타일을 지정하거나 인쇄, 음성 장치 등의 조건에 따라 다른 스타일을 적용할 수 있습니다.

@media (min-width: 700px) {
    /* ... */
}

접근성

웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다. 웹 접근성에 대한 가이드라인은 대표적으로

  1. 속어, 약어 사용을 지양하라
  2. 콘텐츠의 제목과 단락을 명확하게 구분하자
  3. 키보드 동작을 제공하자. 예를들어 button, input, select 요소를 사용하지 않고 div와 css를 이용해 비슷하게 구현해 사용할 때도 있습니다. 하지만 이때 기본요소들이 제공하는 키보드 동작들을 모두 사용하지 못합니다. 만약 div를 사용해야 한다면 추가적인 코드 작성으로 사용 목적과 유사하게 만들어야 합니다. role, tap-index, 키보드 이벤트 리스너등을 추가하는게 좋습니다.
  4. Focus하는 지점을 명확하게 하자. 예를들어 input칸에 갔을경우 윤곽선이 생기는 것을 설정해주자
  5. 멀티미디어 요소에 접근성을 부여하자.
<img src="coffee.png>

스크린 리더는 이미지를 “coffee.png.image” 라고 읽습니다.

<img src="coffee.png" alt=컵에 담긴 따듯한 아메리카노" title="아메리카노"/>

위 예제처럼 작성한다면 스크린 리더는 컵에 담긴 따듯한 아메리카노 라고 읽습니다.

웹 접근성 가이드라인을 모두 완벽하게 맞추는 것은 사실상 불가능에 가깝지만 맞추려는 노력은 해야한다.

Lee YoungGyu